<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>奔跑的小熊案例</title>

    <style>
        body {
            /* background-color: #999; */
            margin: 0;
        }
        
        #container {
            width: 100%;
            height: 700px;
            position: relative;
        }
        
        .bear {
            width: 200px;
            height: 100px;
            background: url(img/bear.png) no-repeat;
            animation: bear .8s steps(8) infinite, move 3s linear forwards;
            position: absolute;
            bottom: 10px;
        }
        
        @keyframes bear {
            /* 不能这样写，这样会变成多段动画，animation-timing-function会同时作用于多段动画*/
            /* 12.5% {
                background-position: -200px 0;
            }
            25% {
                background-position: -400px 0;
            }
            37.5% {
                background-position: -600px 0;
            }
            50% {
                background-position: -800px 0;
            }
            62.5% {
                background-position: -1000px 0;
            }
            75% {
                background-position: -1200px 0;
            }
            87.5% {
                background-position: -1400px 0;
            } */
            100% {
                background-position: -1600px 0;
            }
        }
        
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                transform: translateX(-50%);
            }
        }
        
        .bg1 {
            width: 100%;
            height: 336px;
            position: absolute;
            background: url(img/bg1.png);
            bottom: 0;
            animation: bg_move 30s linear infinite;
        }
        
        .bg2 {
            width: 100%;
            height: 569px;
            position: absolute;
            background: url(img/bg2.png);
            opacity: .4;
            bottom: 0;
            animation: bg_move 50s linear infinite;
        }
        
        @keyframes bg_move {
            100% {
                background-position: -3840px 0;
            }
        }
    </style>

</head>

<body>
    <div id="container">
        <div class="bg2"></div>
        <div class="bg1"></div>
        <div class="bear"></div>
    </div>

</body>

</html>